<template>
    <div class="pet-detail-container">
        <div class="back-navigation" style="text-align: left;">
            <el-button @click="$router.go(-1)" icon="el-icon-arrow-left" plain type="primary" effect="dark">返回</el-button>
        </div>

        <div v-if="loading" class="loading-container">
            <el-skeleton style="width: 100%" animated>
                <template #template>
                    <el-skeleton-item variant="image" style="width: 100%; height: 500px" />
                    <div style="padding: 30px;">
                        <el-skeleton-item variant="h1" style="width: 50%" />
                        <div style="display: flex; margin-top: 30px; align-items: center;">
                            <el-skeleton-item variant="text" style="margin-right: 20px; width: 120px" />
                            <el-skeleton-item variant="text" style="margin-right: 20px; width: 120px" />
                            <el-skeleton-item variant="text" style="width: 120px" />
                        </div>
                        <el-skeleton-item variant="p" style="width: 100%; margin-top: 30px" />
                        <el-skeleton-item variant="p" style="width: 100%" />
                        <el-skeleton-item variant="p" style="width: 100%" />
                    </div>
                </template>
            </el-skeleton>
        </div>

        <div v-else-if="pet" class="pet-detail-content">
            <div class="pet-image-gallery">
                <img :src="`/api/Petfile/${pet.image}`" alt="宠物主图" class="pet-image" />
            </div>

            <div class="pet-info-container">
                <div class="pet-header">
                    <h1 class="pet-name">{{ pet.pet_name }}</h1>
                    <div class="pet-status" :class="pet.status === 'available' ? 'available' : 'adopted'">
                        {{ pet.status === 'available' ? '待领养' : '已领养' }}
                    </div>
                </div>

                <div class="pet-tags">
                    <el-tag size="large" effect="light" type="success">{{ pet.age }}岁</el-tag>
                    <el-tag size="large" effect="light" type="warning">{{ pet.gender === 'female' ? '母' : '公'
                        }}</el-tag>
                    <el-tag size="large" effect="light" type="info">{{ pet.petTypeName }}</el-tag>
                </div>

                <div class="pet-description-section">
                    <h3 class="section-title" align="left">性格特点</h3>
                    <p class="pet-description">{{ pet.pet_character }}</p>
                </div>

                <div class="pet-detail-section">
                    <h3 class="section-title" align="left">领养要求</h3>
                    <p class="pet-requirements">{{ pet.requirements || '无' }}</p>
                </div>

                <div class="action-buttons">
                    <el-button type="primary" size="large" class="adopt-button" :disabled="pet.status !== 'available'"
                        @click="handleAdopt(pet)">
                        申请领养
                    </el-button>
                    <el-button type="success" size="large" class="contact-button"
                        @click="handleContact">联系救助站</el-button>
                </div>
            </div>
        </div>

        <div v-else class="error-container">
            <el-empty description="未找到宠物信息" :image-size="200">
                <el-button type="primary" @click="$router.push('/front/adoption')">
                    返回领养页面
                </el-button>
            </el-empty>
        </div>

        <el-dialog
            v-model="dialogVisible"
            title="申请领养"
            width="30%"
            :before-close="handleClose"
        >
            <el-form
                ref="formRef"
                :model="adoptionForm"
                :rules="rules"
            >
                <el-form-item label="领养理由" prop="reason">
                    <el-input v-model="adoptionForm.reason" type="textarea" :rows="4" />
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="adoptionForm.address" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submitAdoption">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()
const petId = route.params.id

// 状态
const pet = ref(null)
const loading = ref(true)
const dialogVisible = ref(false)
const adoptionForm = ref({
  user_id: 1, // 这里应该从用户登录状态获取
  pet_id: petId,
  reason: '',
  status: 'pending',
  address: '',
  review_comment: null,
  created_at: new Date().toISOString(),
  updated_at: new Date().toISOString()
})

// 表单验证规则
const rules = {
  reason: [
    { required: true, message: '请填写领养理由', trigger: 'blur' },
    { min: 10, message: '领养理由至少10个字符', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请填写详细地址', trigger: 'blur' }
  ]
}

const formRef = ref(null)

// 获取宠物详情
const getPetDetail = async () => {
  loading.value = true
  try {
    const res = await request.get(`/pet/detail/${petId}`)
    pet.value = res.data
  } catch (error) {
    console.error('获取宠物详情失败:', error)
    ElMessage.error('获取宠物详情失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 处理领养申请
const handleAdopt = (pet) => {
  dialogVisible.value = true
}

// 提交领养申请
const submitAdoption = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await request.post('/applications/applicationAdd', adoptionForm.value)
        ElMessage.success('申请提交成功，我们会尽快与您联系！')
        dialogVisible.value = false
      } catch (error) {
        console.error('提交申请失败:', error)
        ElMessage.error('提交申请失败，请稍后重试')
      }
    }
  })
}

// 联系救助站
const handleContact = () => {
  ElMessageBox.alert(
    '救助站电话：13800138000<br>邮箱：petrescue@example.com<br>地址：XX市XX区XX路XX号',
    '联系方式',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '知道了',
    }
  )
}

onMounted(() => {
  getPetDetail()
})
</script>

<style scoped>
.pet-detail-container {
  background-color: #f8fafc;
  min-height: 100vh;
  padding: 40px;
}

.back-navigation {
  max-width: 1200px;
  margin: 0 auto 30px;
}

.loading-container {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  overflow: hidden;
}

.pet-detail-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 992px) {
  .pet-detail-content {
    grid-template-columns: 1fr 1fr;
  }
}

.pet-image-gallery {
  margin-bottom: 0;
}

.pet-image {
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.pet-image:hover {
  transform: scale(1.02);
}

.pet-info-container {
  background: white;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.pet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.pet-name {
  font-size: 36px;
  color: #1a1a1a;
  margin: 0;
  font-weight: 600;
}

.pet-status {
  padding: 10px 20px;
  border-radius: 30px;
  color: white;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
}

.pet-status.available {
  background-color: #10b981;
}

.pet-status.adopted {
  background-color: #6b7280;
}

.pet-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 40px;
}

.section-title {
  font-size: 24px;
  color: #1a1a1a;
  margin: 35px 0 20px;
  border-left: 5px solid #3b82f6;
  padding-left: 20px;
  font-weight: 600;
}

.pet-description, .pet-requirements {
  color: #4b5563;
  line-height: 1.8;
  margin-bottom: 25px;
  font-size: 16px;
}

.pet-detail-section, .pet-description-section {
  margin-bottom: 40px;
}

.action-buttons {
  display: flex;
  gap: 20px;
  margin-top: 50px;
}

.adopt-button, .contact-button {
  flex: 1;
  height: 50px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.adopt-button:hover, .contact-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
</style>